var ctrlHeight = 75;
var ctrlWidth = 100;
var isMouseEnter = false;
var timeInterval;
var idHover = "";
var itemID = 0;

var imageHeight = 70;
var imageWidth = 70;

$.browser.chrome = /chrome/.test(navigator.userAgent.toLowerCase());

google.setOnLoadCallback(function() {
	$("#dropable_high img").live({ 
		mouseenter:function(){
			window.clearInterval(timeInterval);
			idHover = $(this).attr('rel');
			var offset = $(this).offset();
			var left = offset.left;
			var top = offset.top;
			
			itemID = $(this).attr('rel');
			var ctrlDel = "<a href='javascript:void(0);' onClick='javascript:deleteItemDrop("+itemID+",\"high\")'>"+title_ctrl_ranking_delete+"</a>";
			$('#control-div-drop #ctrl-delete').html(ctrlDel);
			
			$('#control-div-drop').css(
											{
												left:left,
												top:top+imageHeight
											}).removeClass('hidden');
		
			addHoverToFocus_IMAGE();
		},
		mouseleave:function(){
			window.clearInterval(timeInterval);
			isMouseEnter = false;
			$('#control-div-drop').hover(
				function(){
					isMouseEnter = true;
					addHoverToFocus_IMAGE();	
				},
				function(){
					$(this).addClass('hidden');
					removeHoverToFocus_IMAGE();
				}
			);
			timeInterval = setInterval("checkOnOverCtrl_IMAGE()",3);
		}
	});
	
	$("#dropable_standard img").live({ 
		mouseenter:function(){
			window.clearInterval(timeInterval);
			idHover = $(this).attr('rel');
			var offset = $(this).offset();
			var left = offset.left;
			var top = offset.top;
			
			itemID = $(this).attr('rel');
			var ctrlDel = "<a href='javascript:void(0);' onClick='javascript:deleteItemDrop("+itemID+",\"standard\")'>"+title_ctrl_ranking_delete+"</a>";
			$('#control-div-drop #ctrl-delete').html(ctrlDel);
			
			$('#control-div-drop').css(
											{
												left:left,
												top:top+imageHeight
											}).removeClass('hidden');
		
			addHoverToFocus_IMAGE();
		},
		mouseleave:function(){
			window.clearInterval(timeInterval);
			isMouseEnter = false;
			$('#control-div-drop').hover(
				function(){
					isMouseEnter = true;
					addHoverToFocus_IMAGE();	
				},
				function(){
					$(this).addClass('hidden');
					removeHoverToFocus_IMAGE();
				}
			);
			timeInterval = setInterval("checkOnOverCtrl_IMAGE()",3);
		}
	});
	
	$("#dropable_low img").live({ 
		mouseenter:function(){
			window.clearInterval(timeInterval);
			idHover = $(this).attr('rel');
			var offset = $(this).offset();
			var left = offset.left;
			var top = offset.top;
			
			itemID = $(this).attr('rel');
			var ctrlDel = "<a href='javascript:void(0);' onClick='javascript:deleteItemDrop("+itemID+",\"lower\")'>"+title_ctrl_ranking_delete+"</a>";
			$('#control-div-drop #ctrl-delete').html(ctrlDel);
			
			$('#control-div-drop').css(
											{
												left:left,
												top:top+imageHeight
											}).removeClass('hidden');
		
			addHoverToFocus_IMAGE();
		},
		mouseleave:function(){
			window.clearInterval(timeInterval);
			isMouseEnter = false;
			$('#control-div-drop').hover(
				function(){
					isMouseEnter = true;
					addHoverToFocus_IMAGE();	
				},
				function(){
					$(this).addClass('hidden');
					removeHoverToFocus_IMAGE();
				}
			);
			timeInterval = setInterval("checkOnOverCtrl_IMAGE()",3);
		}
	});
});
  
jQuery(document).ready(function() {
	$("<div />" )
             .attr( "id", "control-div-ranking")
             .addClass( "hidden" )
             .html( "<div id='ctrl-upper'></div>"+"<div id='ctrl-standard'></div>"+"<div id='ctrl-lower'></div>")
             .appendTo( $( 'body' ) );
	
	$("<div />" )
             .attr( "id", "control-div-drop")
             .addClass( "hidden" )
             .html( "<div id='ctrl-delete'></div>")
             .appendTo( $( 'body' ) );	

	$('#mcs_container .ui-widget-content').each(function(i,o){
		$(this).hover(
			function(){
				window.clearInterval(timeInterval);
				idHover = $(this).attr('id');
				var offset = $(this).offset();
				var left = offset.left;
				var top = offset.top;
				
				itemID = $('#'+idHover).find('a.info').attr('rel');
				var ctrlUpper = "<a href='javascript:void(0);' onClick='javascript:attachUpperToDropBox_UPPER("+itemID+")'>"+title_ctrl_ranking_upper+"</a>";
				var ctrlStandard = "<a href='javascript:void(0);' onClick='javascript:attachUpperToDropBox_STANDARD("+itemID+")'>"+title_ctrl_ranking_standard+"</a>";
				var ctrlLower = "<a href='javascript:void(0);' onClick='javascript:attachUpperToDropBox_LOWER("+itemID+")'>"+title_ctrl_ranking_lower+"</a>";
				
				$('#control-div-ranking #ctrl-upper').html(ctrlUpper);
				$('#control-div-ranking #ctrl-standard').html(ctrlStandard);
				$('#control-div-ranking #ctrl-lower').html(ctrlLower);
				
				$('#control-div-ranking').css(
												{
													left:left,
													top:top-ctrlHeight,
													width:ctrlWidth,
													height:ctrlHeight,
												}).removeClass('hidden');
			
				addHoverToFocusDiv();
			},
			function(){
				window.clearInterval(timeInterval);
				isMouseEnter = false;
				$('#mcs_container .ui-widget-content').each(function(i,o){
					$(this).css({
						border:"0 none",
						width:100,
						height:118
					}); 
					$(this).children('div').eq(0).find("img").css({marginLeft:0,marginTop:10}); 
					$(this).children('h3').find('a').css({marginLeft:0});
					$(this).css({backgroundPosition:'0px 0px'});
				});
				
				$('#control-div-ranking').hover(
					function(){
						isMouseEnter = true;
						addHoverToFocusDiv();	
					},
					function(){
						$(this).addClass('hidden');
						removeHoverToFocusDiv();
					}
				);
				timeInterval = setInterval("checkOnOverCtrlDiv()",3);
			}
		);
	});
	
});

function addHoverToFocusDiv(){
	$('#'+idHover).css({
		border:"2px solid #ffffff",
		width:96,
		height:114
	});
	
	$('#'+idHover).children('div').eq(0).find("img").css({marginLeft:-4,marginTop:8}); 	
	$('#'+idHover).css({backgroundPosition:'0px -2px'});	
	$('#'+idHover).children('h3').find('a').css({marginLeft:-2});
}

function removeHoverToFocusDiv(){
	$('#'+idHover).css({
			border:"0 none",
			width:100,
			height:118
	});
	
	$('#'+idHover).children('div').eq(0).find("img").css({marginLeft:0,marginTop:10}); 
	$('#'+idHover).children('h3').find('a').css({marginLeft:0});
	$('#'+idHover).css({backgroundPosition:'0px 0px'});
}

function checkOnOverCtrlDiv(){
	if(!isMouseEnter && !$('#control-div-ranking').hasClass('hidden') ){
		$('#control-div-ranking').addClass('hidden');
		$('#'+idHover).css({
			border:"0 none",
			width:100,
			height:118
		});
		$('#'+idHover).children('div').eq(0).find("img").css({marginLeft:0,marginTop:10});
		$('#'+idHover).children('h3').find('a').css({marginLeft:0});
		$('#'+idHover).css({backgroundPosition:'0px 0px'});	
	} 
}

function addHoverToFocus_IMAGE(){
	$("#post-ranks img[rel="+itemID+"]").css({border:'1px solid #ffffff'}); 
}

function removeHoverToFocus_IMAGE(){
	$("#post-ranks img[rel="+itemID+"]").css({border:'1px solid #3B3F40'}); 
}

function checkOnOverCtrl_IMAGE(){
	if(!isMouseEnter && !$('#control-div-drop').hasClass('hidden') ){
		$('#control-div-drop').addClass('hidden');
		removeHoverToFocus_IMAGE();
	} 
}

function pausecomp(ms) {
	ms += new Date().getTime();
	while (new Date() < ms){}
} 

function getMousePosition(timeoutMilliSeconds) {
    $(document).one("mousemove", function (event) {
        window.mouseXPos = event.pageX;
        window.mouseYPos = event.pageY;
        // set a timeout so the handler will be attached again after a little while
        setTimeout("getMousePosition(" + timeoutMilliSeconds + ")", timeoutMilliSeconds);
    });
}

function deleteItemDrop($id, $type){
	switch($type){
		case 'high':
			CFG_arr_high_rank_id = removeArrayElement(CFG_arr_high_rank_id,$id); 
			break;
		case 'standard':
			sessionStorage.setItem('standard_rank_TEMP',0 );
			break;
		case 'lower':
			CFG_arr_lower_rank_id = removeArrayElement(CFG_arr_lower_rank_id,$id); 
			break;
	}	 
	$("#post-ranks img[rel="+$id+"]").remove();
	$('#control-div-drop').addClass('hidden');
	removeHoverToFocus_IMAGE();
	
	var storageObj = {};
	storageObj.high_rank_array= CFG_arr_high_rank_id;
	storageObj.standard_rank_id= sessionStorage.standard_rank_TEMP;
	storageObj.lower_rank_array= CFG_arr_lower_rank_id;
	
	storageObj.high_rank_html = $('#dropable_high').html();
	storageObj.standard_rank_html = $('#dropable_standard').html();
	storageObj.lower_rank_html = $('#dropable_low').html();
	
	sessionStorage.setItem('rank_post_arrays',JSON.stringify(storageObj));
}

function attachUpperToDropBox_UPPER(id){
	var image = $('#link_'+id).children('img').attr('src'); 
	sessionStorage.setItem('htmlTEMP',image);  
	sessionStorage.setItem('rank_TEMP',id); 
	
	processItemAtHighDropBox();
}

function attachUpperToDropBox_STANDARD(id){
	var image = $('#link_'+id).children('img').attr('src'); 	
	sessionStorage.setItem('htmlTEMP',image);  
	sessionStorage.setItem('rank_TEMP',id); 
	
	processItemAtStandardDropBox(); 
}

function attachUpperToDropBox_LOWER(id){
	var image = $('#link_'+id).children('img').attr('src'); 
	sessionStorage.setItem('htmlTEMP',image);  
	sessionStorage.setItem('rank_TEMP',id); 
	
	processItemAtLowerDropBox(); 
}




jQuery(document).ready(function() {
	if(! sessionStorage.rank_post_arrays || sessionStorage.rank_post_arrays == "{}" ){
		var storageObj = {};
		sessionStorage.setItem('rank_post_arrays',JSON.stringify(storageObj));
	}else{
		var obj = jQuery.parseJSON(sessionStorage.rank_post_arrays);
		CFG_arr_high_rank_id = [];
		CFG_arr_lower_rank_id = [];
		for(var i=0;i < obj.high_rank_array.length;i++ ){
			CFG_arr_high_rank_id.push( parseInt(obj.high_rank_array[i]) );
		}
		
		for(var i=0;i < obj.lower_rank_array.length;i++ ){
			CFG_arr_lower_rank_id.push( parseInt(obj.lower_rank_array[i]) );
		}
		sessionStorage.setItem('standard_rank_TEMP', parseInt(obj.standard_rank_id) );
		
		$('#dropable_high').html(obj.high_rank_html);
	    $('#dropable_standard').html(obj.standard_rank_html);
	    $('#dropable_low').html(obj.lower_rank_html);
	}
});

jQuery(document).ready(function() {
	$( "#mcs_container .ui-widget-content .dragDiv" ).draggable({ 
			cursor: 'move', 
			revert: true ,
			helper: "clone",
			appendTo: 'body', 
			start: function(event, ui) { 
				var id = $(this).find('a.info').attr('rel') ;
				var image = $(this).find('a').children('img').attr('src'); 
				
				sessionStorage.setItem('htmlTEMP',image);  
				sessionStorage.setItem('rank_TEMP',id);
		}
		
	});
	
	$( "#dropable_high" ).droppable({
		drop: function( event, ui ) {
			processItemAtHighDropBox();
		}
	});
	
	$('#dropable_standard').droppable({
		drop: function( event, ui ) {
			processItemAtStandardDropBox();
		}
	});
	
	$('#dropable_low').droppable({
		drop: function( event, ui ) {
			processItemAtLowerDropBox();
		}
	});
	
	$('#dropable_high').bind('mouseover',function(){
		$(this).css('cursor','crosshair');
	});
	$('#dropable_low').bind('mouseover',function(){
		$(this).css('cursor','crosshair');
	});
});

function processItemAtHighDropBox(){
	$("#dropable_high").children('#desc').remove();
	
	if( CFG_arr_high_rank_id.in_array( sessionStorage.rank_TEMP ) ){
		//do nothing
	}else if( CFG_arr_high_rank_id.length >= CFG_max_high_rank ){
		//remove the first item
		 $('#dropable_high img[rel="'+CFG_arr_high_rank_id[0]+'"]').remove();
		 CFG_arr_high_rank_id.shift();
		 // we will add the latest item.
		 $("#dropable_high").append( "<img rel='"+sessionStorage.rank_TEMP+"' " + "src='"+  sessionStorage.htmlTEMP + "' style='width:70px;height:70px;margin:2px 5px;border:1px solid #3B3F40' />" );
		 CFG_arr_high_rank_id.push(sessionStorage.rank_TEMP);
	}else{
		$("#dropable_high").append( "<img rel='"+sessionStorage.rank_TEMP+"' " + "src='"+  sessionStorage.htmlTEMP + "' style='width:70px;height:70px;margin:2px 5px;border:1px solid #3B3F40' />" );
		CFG_arr_high_rank_id.push(sessionStorage.rank_TEMP);
	}
	//check if item existed in standard box - remove item in standard box
	if( CFG_arr_high_rank_id.in_array( sessionStorage.standard_rank_TEMP ) ){
		//remove item of standard box
		$('#dropable_standard img[rel="'+sessionStorage.standard_rank_TEMP+'"]').remove();
		sessionStorage.setItem('standard_rank_TEMP', 0);
	}
	//check if item existed in lower box - remove item in lower box
	if(CFG_arr_lower_rank_id.length){
		for(var i=0; i<CFG_arr_lower_rank_id.length; i++){
			if(CFG_arr_high_rank_id.in_array(CFG_arr_lower_rank_id[i])){
				//remove it at lower rank box
				$('#dropable_low img[rel="'+CFG_arr_lower_rank_id[i]+'"]').remove();
				CFG_arr_lower_rank_id.remove(CFG_arr_lower_rank_id[i]);
			}
		}
	}
	$('#hight-rank #div_hide').removeClass("hidden"); 
	
	var storageObj = {};
	storageObj.high_rank_array= CFG_arr_high_rank_id;
	storageObj.standard_rank_id= sessionStorage.standard_rank_TEMP;
	storageObj.lower_rank_array= CFG_arr_lower_rank_id;
	
	storageObj.high_rank_html = $('#dropable_high').html();
	storageObj.standard_rank_html = $('#dropable_standard').html();
	storageObj.lower_rank_html = $('#dropable_low').html();
	
	sessionStorage.setItem('rank_post_arrays',JSON.stringify(storageObj));
}

function processItemAtStandardDropBox(){
	 if(sessionStorage.standard_rank_TEMP != null ){
		 $('#dropable_standard').children('#desc').remove();
		 //remove old image
		 $('#dropable_standard img[rel="'+sessionStorage.standard_rank_TEMP+'"]').remove();
		 
		 //add new item
		 $('#dropable_standard').append( "<img rel='"+sessionStorage.rank_TEMP+"' " + "src='"+  sessionStorage.htmlTEMP + "' />" );
		 //store id
		 sessionStorage.standard_rank_TEMP = sessionStorage.rank_TEMP;
	 }else{
		 $('#dropable_standard').children('#desc').remove();
		 $('#dropable_standard').append( "<img rel='"+sessionStorage.rank_TEMP+"' " + "src='"+  sessionStorage.htmlTEMP + "' />" );
		 
		 sessionStorage.setItem('standard_rank_TEMP',sessionStorage.rank_TEMP);
	 }
	 //check if item existed in high rank box- remove item in high rank box
	 if( CFG_arr_high_rank_id.in_array( sessionStorage.standard_rank_TEMP ) ){
		 $('#dropable_high img[rel="'+sessionStorage.standard_rank_TEMP+'"]').remove();
		 CFG_arr_high_rank_id.remove(sessionStorage.standard_rank_TEMP);
	 }
	 //check if item existed in lower rank box- remove item in lower rank box
	 if( CFG_arr_lower_rank_id.in_array( sessionStorage.standard_rank_TEMP ) ){
		 $('#dropable_low img[rel="'+sessionStorage.standard_rank_TEMP+'"]').remove();
		 CFG_arr_lower_rank_id.remove(sessionStorage.standard_rank_TEMP);
	 }
	
	var storageObj = {};	
	storageObj.high_rank_array= CFG_arr_high_rank_id;
	storageObj.standard_rank_id= sessionStorage.standard_rank_TEMP;
	storageObj.lower_rank_array= CFG_arr_lower_rank_id;
	
	storageObj.high_rank_html = $('#dropable_high').html();
	storageObj.standard_rank_html = $('#dropable_standard').html();
	storageObj.lower_rank_html = $('#dropable_low').html();
	
	sessionStorage.setItem('rank_post_arrays',JSON.stringify(storageObj));
}

function processItemAtLowerDropBox(){
	$('#dropable_low').children('#desc').remove();
	if( CFG_arr_lower_rank_id.in_array( sessionStorage.rank_TEMP ) ){
		//do nothing
	}else if( CFG_arr_lower_rank_id.length >= CFG_max_lower_rank ){
		//remove the first item
		 $('#dropable_low img[rel="'+CFG_arr_lower_rank_id[0]+'"]').remove();
		 CFG_arr_lower_rank_id.shift();
		 // we will add the latest item.
		 $('#dropable_low').append( "<img rel='"+sessionStorage.rank_TEMP+"' " + "src='"+  sessionStorage.htmlTEMP + "' style='width:70px;height:70px;margin:2px 5px;border:1px solid #3B3F40' />" );
		 CFG_arr_lower_rank_id.push(sessionStorage.rank_TEMP);
	}else{
		$('#dropable_low').append( "<img rel='"+sessionStorage.rank_TEMP+"' " + "src='"+  sessionStorage.htmlTEMP + "' style='width:70px;height:70px;margin:2px 5px;border:1px solid #3B3F40' />" );
		CFG_arr_lower_rank_id.push(sessionStorage.rank_TEMP);
	}
	//check if item existed in standard box - remove item in standard box
	if( CFG_arr_lower_rank_id.in_array( sessionStorage.standard_rank_TEMP ) ){
		//remove item of standard box
		$('#dropable_standard img[rel="'+sessionStorage.standard_rank_TEMP+'"]').remove();
		sessionStorage.setItem('standard_rank_TEMP',0);
	}
	//check if item existed in high box - remove item in high box
	if(CFG_arr_high_rank_id.length){
		for(var i=0; i<CFG_arr_high_rank_id.length; i++){
			if(CFG_arr_lower_rank_id.in_array(CFG_arr_high_rank_id[i])){
				//remove it at lower rank box
				$('#dropable_high img[rel="'+CFG_arr_high_rank_id[i]+'"]').remove();
				CFG_arr_high_rank_id.remove(CFG_arr_high_rank_id[i]);
			}
		}
	}
	
	$('#lower-rank #div_hide_lower_rank').removeClass("hidden"); 
	
	var storageObj = {};
	storageObj.high_rank_array= CFG_arr_high_rank_id;
	storageObj.standard_rank_id= sessionStorage.standard_rank_TEMP;
	storageObj.lower_rank_array= CFG_arr_lower_rank_id;
	
	storageObj.high_rank_html = $('#dropable_high').html();
	storageObj.standard_rank_html = $('#dropable_standard').html();
	storageObj.lower_rank_html = $('#dropable_low').html();
	
	sessionStorage.setItem('rank_post_arrays',JSON.stringify(storageObj));
}
	